---
slug: 2024-03-30-sfml-vscode
title: Использование Visual Studio Code для разработки приложений на SFML
authors: [aladin]
tags: [разработка]
---

В данной статье представлен способ настройки Visual Studio Code для работы с SFML.

<!--truncate-->

## Шаблон проекта CMake для SFML {#template}

В качестве основы вы можете использовать шаблон CMake-проекта: [CMake SFML Project Template | CMake](https://github.com/SFML/cmake-sfml-project).

## Решение проблемы с заголовочными файлами

При открытии проекта, использующий SFML в Visual Studio Code вы можете столкнуться с проблемой, что IDE подсвечивает заголовочные файлы красным. Это вызвано тем, что расширение [C/C++](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) не видит этих заголовочных файлов.

Решение этой проблемы показано в видеозаписи: [SFML Setup in Visual Studio Code | Create C/C++ Applications using SFML + VSCode + MinGW-w64 | YouTube](https://www.youtube.com/watch?v=rZE700aaT5I).

Чтобы решить эту проблему, в текущей папке нужно уточнить где именно искать заголовочные файлы.

Для этого через палитру команд (Command Palette) перейдите в пункт "С/С++: Edit Configurations (UI)":

![Открытие палитры команды](command-palette.png)

![С/С++: Edit Configurations (UI)](edit-configurations.png)

Далее у вас в рабочей папке `.vscode` создастся файл `c_cpp_properties.json` (`.vscode/c_cpp_properties.json`). Если этого не произойдет, вы можете перейти к этому файлу из UI:

![Open c_cpp_properties.json](open-c_cpp_properties.png)

Пример того, как этот файл может выглядеть:

![Example c_cpp_properties.json](example-c_cpp_properties.png)

Нас интересует `"includePath"`.

Если вы используете [шаблон CMake](#template), который предложен выше, то заголовочные файлы при сборке окажутся в папке `build/_deps/sfml-src/include/SFML`. В примере заголовочные файлы должны будут подцепляться по маске `"${workspaceFolder}/**"`. Если этого не происходит, то в это поле можно дополнительно добавить `${workspaceFolder}/build/_deps/sfml-src/include/SFML/**`:

```json
"includePath": [
  "${workspaceFolder}/**",
  "${workspaceFolder}/build/_deps/sfml-src/include/SFML/**"
]
```

Если место установки SFML отличается от предложенного, например, вы использовали MinGW или homebrew для установки библиотеки, то вам необходимо дополнить список `includePath` **полным путем** до заголовочных файлов используемой версии SFML.

## C/C++ Advanced Lint for VS Code

Если вы используете расширение [C/C++ Advanced Lint for VS Code](https://marketplace.visualstudio.com/items?itemName=jbenden.c-cpp-flylint), то после сборки проекта в Visual Studio Code вы можете столкнуться с проблемой `'SFML/Graphics.hpp' file not found [Lexical or Preprocessor Issue]Clang (c-cpp-flylint)`:

!['SFML/Graphics.hpp' file not found](header-error.png)

Проблема также связана с тем, что линтер не видит заголовочных файлов. Чтобы это решить, необходимо в настройках линтера указать путь, где искать заголовочные файлы. Для этого откройте через палитру команд "Preferences: Open Settings (UI)":

![Preferences: Open Settings](open-settings-ui.png)

В открывшемся окне перейдите на вкладку "Workspace". В поиске введите  "C-cpp-flylint: include".

![C-cpp-flylint: include](edit-c-cpp-flylint.png)

Для пунктов ниже вам необходимо нажать "Edit in settings.json":

- "C-cpp-flylint › Clang: Include Paths"
- "C-cpp-flylint › Cppcheck: Include Paths"
- "C-cpp-flylint: Include Paths"

В каждом поле `c-cpp-flylint.*includesPaths` необходимо указать **полный путь** до заголовочных файлов. В итоге может получиться так:

![Example settings](example-settings.png)
